<template>
    <div id="fireManagement">
        <div style="height: 100%;">
            <div class="body_right">
                <div class="header-right">
                    应急人员通讯录
                </div>
                <div class="btn_group">
                    <Input v-model="searchName" placeholder="姓名" size="small" style="width: 15rem;"/>
                    <Button type="primary" icon="ios-search" size="small" @click="search">查询</Button>
                    <Button type="ghost" icon="ios-email-outline" size="small" style="float:right;margin-right: 6px;"
                            @click="batchsend">群发短信
                    </Button>
                </div>
                <div class="tableWidth">
                    <Table border :columns="columns7" :data="data6" stripe @on-selection-change="compileSelect"></Table>
                </div>

                <div class="page_container">
                    <Page :current="currentPage" :total="totalCount" size="small" simple class="page_btn"
                          @on-change="changePage"></Page>
                    <P class="page_text">共{{totalCount}}条</P>
                </div>
            </div>
            <Modal title="编辑短信" v-model="note" :closable="false" :mask-closable="false" width="600">
                <Form ref="formNotedate" :model="formNotedate" :rules="ruleNotedate" :label-width="70" tyle="margin-right: 20px">
                    <h4 style="margin-bottom: 20px">【大庆石化公司消防支队短信平台】</h4>
                    <Card class="right-card" dis-hover  >
                        <p slot="title">短信模板选择</p>
                        <Form-item label="模板类型" prop="">
                            <Select v-model="formNotedate.templateId" clearable  @on-change="taskListTypeChange">
                                <Option v-for="item in taskListTypeData" :value="item.templateId" :key="item.templateName" >{{item.templateName }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="短信模板" prop="">
                            <Input v-model="formNotedate.templateContext" readonly type="textarea" :rows="2" ></Input>
                        </Form-item>
                    </Card>
                    <Card class="right-card" dis-hover >
                        <p slot="title">填写短信</p>
                        <P v-for="(list,index) in formNotedate.noteContent" :key="list.text" style="margin: 10px" >
                            内容{{index+1}}：
                            <Input v-model="list.text" :maxlength="maxlength" style="width: 455px"></Input>
                        </P>
                        <div style="color: #f30;height: 30px; line-height: 30px;margin-left: 65px;">{{contentAssist}}</div>
                    </Card>
                    <Card class="right-card" dis-hover >
                        <p slot="title">短信模板说明</p>
                        <p>1.根据短信平台提供的模板短信由固定内容与填写内容构成，其中 " %s " 为需要替换的内容；</p>
                        <p>2.内容可以是汉字、字母、数字或者特殊字符组合，但单个变量内容长度不得超过30个字。</p>
                    </Card>
                </Form>
                <div slot="footer">
                    <Button type="ghost" size="small" @click="cancelNote">取消</Button>
                    <Button type="primary" size="small" :loading="noteing" @click="SendOutNote()">发送</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        data() {
            return {
                maxlength:30,    //短信内容填写
                noteing: false,
                note: false,
                truckTypeText: '',
                //搜索条件
                searchOrganization: '',
                searchName: '',
                idss: "",   //批量删除/勾选项（各项ids值-以字符串形式串联起来，逗号分割）
                currentPage: 1, //当前页
                totalCount: 0,  //总条数
                taskListTypeData:'', //短信选择下拉
                formNotedate: {
                    templateId:'',
                    templateName:'',
                    templateContext:'',
                    noteContent:[],
                },
                contentAssist:'',
                ruleNotedate:{
                },
                /*  表头开始*/
                columns7: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'name',
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        align: 'center',
                        render: (h, params) => {
                            const row = params.row;
                            const text = row.gender == 1 ? '男' : '女';
                            return h('div', {
                                props: {}
                            }, text);
                        }
                    },
                    {
                        title: '职称',
                        key: 'jobTitle',
                        align: 'center'
                    },
                    {
                        title: '工作岗位',
                        key: 'operatePost',
                        align: 'center'
                    },
                    {
                        title: '办公电话',
                        key: 'officeNumber',
                        align: 'center'
                    },
                    {
                        title: '手机',
                        key: 'phone',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {},
                                    on: {
                                        click: () => {
                                            this.idss = params.row.id
                                            this.note = true;
                                        }
                                    }
                                }, '发送短信')
                            ]);
                        }
                    },
                ],
                /*表头结束*/
                /* 表格数据显示区域*/
                data6: [],
                /* 树结构*/
                baseData: [],
                /* 全局变量*/
                modal5: false,
            }
        },
        /* 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。*/
        created() {
            this.dictionary_flipList();
            this.specialistFlipList();
            this.flipListSimple();
        },
        /*在挂载开始之前被调用：相关的 render 函数首次被调用。*/
        mounted: function () {

        },
        methods: {
            //日期格式转换
            dateformatting(dateval) {
                var newTime = new Date(dateval);
                var yyyy = newTime.getFullYear();
                var MM = newTime.getMonth() + 1;
                var dd = newTime.getDate();
                var hh = newTime.getHours();
                var mm = newTime.getMinutes();
                var ss = newTime.getSeconds();
                var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                return time
            },

            cancelFrom() {  //单击取消重置并关闭模态框
                this.handleReset('formValidate');
                this.modal5 = false;
            },
            changePage(page) {     //分页展示
                this.currentPage = page;
                this.specialistFlipList();
            },
            //显示 查询
            specialistFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.specialist_flipList,
                    {
                        name: _this.searchName,
                        departmentName: _this.searchOrganization,
                        pageNo: _this.currentPage
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.data6 = data.listInfo;
                        _this.totalCount = data.flipInfo.totalCount;
                    }
                )
            },

            compileSelect(selection, row) {   //表格选择
                var ids = [];
                for (var i = 0; i < selection.length; i++) {
                    ids.push(selection[i].id);
                }
                this.idss = ids.join(',');
            },

            search() { //查询
                this.currentPage=1;
                this.specialistFlipList();  //调用显示接口
            },
            //短信群发
            batchsend() {
                if(this.idss){
                    this.note = true;
//                    this.taskListTypeData = data;
                    this.formNotedate.templateId = this.taskListTypeData[0].templateId;
                    this.formNotedate.templateContext = this.taskListTypeData[0].templateContext;
                }else {
                    this.$Modal.info({
                        title: '提示',
                        content: '请在列表选择发送人员！'
                    });
                }
            },
            //短信模板选择
            taskListTypeChange(val){
                this.formNotedate.noteContent=[];
                for(let i=0;i<this.taskListTypeData.length;i++){
                    if(val==this.taskListTypeData[i].templateId){
                        this.formNotedate.templateId=this.taskListTypeData[i].templateId;
                        this.formNotedate.templateContext=this.taskListTypeData[i].templateContext;
                        let str =this.taskListTypeData[i].templateContext;
                        let reg = /%s/g;
                        let arr  = str.match(reg);
                        if (arr.length>0){
                            for(let i=0;i<arr.length;i++){
                                this.formNotedate.noteContent[i] ={text:''};
                            }
                        }
                    }
                }
            },

            //发送
            SendOutNote() {
                this.contentAssist='';
                let newarr=[];
                if(this.formNotedate.templateId ==''){
                    this.contentAssist='请选择短信模板';
                }

                for(let i=0;i<this.formNotedate.noteContent.length;i++){
                    if(this.formNotedate.noteContent[i].text==''){
                        this.contentAssist='内容不能为空';
                    }else {
                        newarr.push(this.formNotedate.noteContent[i].text);
                    }
                }
                let newnoteContent=newarr.join(',');

                if(this.contentAssist=='' ){
                    this.noteing=true;
                    var _this = this;
                    ezjsUtil.request(apiConstants.SmsSendController_send, {
                            ids: _this.idss,
                            message: newnoteContent,
                            templateId:_this.formNotedate.templateId
                        },
                        function (err, data) {
                            if (err) {
                                return;
                            }
                            _this.note = false;
                            _this.noteing=false;
                            _this.$Message.success('提交成功!');
                            _this.contentAssist='';
                            _this.formNotedate.noteContent=[];
                            _this.formNotedate.templateId = '';
                            _this.formNotedate.templateContext = '';
                        }
                    )
                }

            },
            //取消发送
            cancelNote() {
                this.note = false;
//                this.handleReset('formNotedate');
//                this.noteContent = '';
                this.contentAssist='';
                this.formNotedate.noteContent=[];
                this.formNotedate.templateId = '';
                this.formNotedate.templateContext = '';
            },

            handleReset(name) {  //重置
                this.$refs[name].resetFields();
            },

            //获取所有短信模板
            flipListSimple() {
                var _this = this;
                ezjsUtil.request(apiConstants.SmsSendController_flipListSimple,
                    {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.taskListTypeData = data;
//                        _this.taskListTypeChange(data[0].templateId);
//                        _this.formNotedate.templateId = data[0].templateId;
//                        _this.formNotedate.templateContext = data[0].templateContext;
                    }
                )
            },

            /*组织机构数*/
            organization_flipList() { //显示 查询
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.baseData = data;
                    }
                )
            },

            /*字典数据相关接口*/
            dictionary_flipList() { //显示 查询
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: "specialistType",
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                    }
                )
            },
        }
    }
</script>
<style lang="less" scoped>
    #fireManagement {
        height: 100%;
        overflow: auto;
        padding: 15px;

    .trees {
        width: 260px;
        height: 100%;
        padding-bottom: 30px;
        float: left;
        border: 1px solid #d3d8e0;
        overflow: auto;

    .tree_title {
        height: 40px;
        border-bottom: 1px solid #d3d8e0;

    .tree_title_h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }

    }
    .tree_body {
        padding-left: 8px;
    }

    }
    .body_right {
        /*margin-left: 280px;*/
        height: 100%;
        overflow: auto;

    .header-right {
        height: 40px;
        border-bottom: 1px solid #d3d8e0;
        font-size: 14px;
        color: #657180;
        line-height: 40px;
        font-family: '微软雅黑';
    }

    .btn_group {
        width: 100%;
        padding: 1.5rem 0;
    }

    .tableWidth {
        width: 100%;
    }

    }

    }
    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }
    .right-card {
        margin-bottom: 20px;
    }
</style>
